<template>
    <div class="clause">
        <el-input v-model="searchParams.keyword" size="mini" style="width: 200px" placeholder="条款/来源编号/名称"> </el-input>
        <el-button type="primary" size="mini" @click="search" style="margin: 10px">查询</el-button>
        <RiskTableP
            ref="risk-table"
            :tableData="tableData"
            :tableConfig="tableConfig"
            :column="columns"
            :paging="paging"
            :searchParams="searchParams"
            style="height: calc(100% - 60px)"
        >
        </RiskTableP>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { mixins } from 'vue-class-component';
import RiskEmitter from '@/common/mixis/risk-emitter.vue';
import { ColumnVO, PageVO, TableConfigVO } from '@/common/vo';
import DictionConstUtil from '@/utils/diction-const-util';
import Dict from '@/project/cibfund/pages/compliance-source/dict/index';
import RiskTableP from '@/common/components/risk-table-plus.vue';
@Component({
    name: 'RelatedClause',
    components: { RiskTableP },
})
export default class RelatedClause extends mixins(RiskEmitter) {
    @Prop() relatedClause!: any[];
    tabData: any[] = [];
    entryType: any = null;
    // 数据是请求接口还是基本信息带出来
    tableData: any[] = [
        {
            termCode_: 'YH012',
            termName_: '创业板股票市值占净资产比不超过15%',
            sourceType_: '公司制度',
            sourceGroupType_: '合规部',
            sourceName_: '全公司禁投管理办法',
            sourceVersion_: '2023版',
            sourceStatus_: '启用',
        },
    ];
    Dict = new Dict();
    tableConfig: TableConfigVO = {
        rowKey: 'termCode_',
    };

    columns: ColumnVO[] = [
        {
            field: 'termCode_',
            title: '条款编号',
            sortable: true,
            filterType: 'search',
            filters: [{ data: '' }],
        },
        {
            field: 'termName_',
            title: '条款名称',
            sortable: true,
            filterType: 'search',
            filters: [{ data: '' }],
        },
        {
            field: 'sourceType_',
            title: '来源类型',
            minWidth: '140px',
            sortable: true,
            filterType: 'funnel',
            filters: [],
        },
        {
            field: 'sourceGroupType_',
            title: '来源分组',
            minWidth: '140px',
            sortable: true,
            filterType: 'search',
            filters: [{ data: '' }],
        },
        {
            field: 'sourceName_',
            title: '来源名称',
            sortable: true,
            filterType: 'search',
            filters: [{ data: '' }],
        },
        {
            field: 'sourceVersion_',
            title: '来源版本号',
            sortable: true,
            filterType: 'search',
            filters: [{ data: '' }],
        },
        {
            field: 'sourceStatus_',
            title: '来源状态',
            sortable: true,
            filterType: 'funnel',
            filters: DictionConstUtil.PojoToList3(this.Dict.sourceStatusPojo),
            render: value => this.Dict.sourceStatusPojo[value],
            style: value => {
                return {
                    color: {
                        '0': 'red',
                        '1': 'green',
                    }[value],
                };
            },
        },
    ];
    paging: PageVO = { currentPage: 1, pageSize: 10, total: 0 };
    searchParams: any = {
        termCode_: '',
        termName_: '',
        sourceType_: '',
        sourceGroupType_: '',
        sourceName_: '',
        sourceVersion_: '',
        sourceStatus_: '',
    };
    async mounted() {}

    @Watch('relatedClause', { deep: true })
    watchRelatedClause() {
        this.tabData = this.relatedClause;
    }

    // 处理table中的数据
    getTbalesData() {
        this.$axios.post({ ...this.searchParams, paging: this.paging }).then((res: any) => {
            this.tableData = res.list;
            this.paging.total = res.total;
        });
    }

    // 查询
    search(): void {}
}
</script>
<style lang="scss" scoped>
.clause {
    color: #222;
    padding: 10px;
    .clause-1 {
        padding: 2px 10px;
    }
}
</style>
